<template>
	<template v-if="isAlready">
		<template v-if="drag">
			<el-steps :active="widget.props.steps.length" align-center style="margin-bottom: -10px;">
				<template v-for="(step,index) in widget.props.steps">
					<el-step>
						<template #title>
							{{ step.title }}
						</template>
						<template #description>
							<div style="float: initial;">
								{{ step.description }}
							</div>
							<div v-if="drag" style="float: initial;cursor: pointer;">
								<el-icon @click='removeStep(step,index)'>
									<component is="el-icon-close"></component>
								</el-icon>
							</div>
						</template>
					</el-step>
				</template>
				<el-step v-if="drag">
					<template #icon>
						<el-icon size="large" @click='addForm={visible: true}' style="cursor: pointer;">
							<component is="el-icon-circle-plus"></component>
						</el-icon>
					</template>
					<template #title>
						添加
					</template>
				</el-step>
			</el-steps>
		</template>
		<template v-else>
			<el-steps :active="widget.props.steps.length" align-center style="margin-bottom: -15px;">
				<template v-for="(step,index) in widget.props.steps">
					<el-step>
						<template #title>
							{{ step.title }}
						</template>
						<template #description>
							<div style="float: initial">
								{{ step.description }}
							</div>
						</template>
					</el-step>
				</template>
			</el-steps>
		</template>

		<el-dialog v-if="drag" v-model="addForm.visible" width="500">
			<template #default>
				<div style="width: 90%;">
					<el-form-item label="描述" label-width="100">
						<el-input v-model="addForm.description"/>
					</el-form-item>
				</div>
			</template>
			<template #footer>
				<div style="flex: auto;text-align: center;">
					<el-button plain type="primary" @click="addStep">确 认</el-button>
				</div>
			</template>
		</el-dialog>
	</template>
</template>
<script>

export default {
	name: "dySteps",
	props: {
		model: {type: Object, default: null},
		widget: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
			addForm: {
				visible: false,
				title: '',
				description: '',
			},
		}
	},
	created() {

		if (!this.widget.props.steps) {
			this.widget.props.steps = [];
		}
		this.isAlready = true;
	},
	methods: {
		removeStep(step, index) {
			this.widget.props.steps = this.widget.props.steps.filter(item => item.key !== step.key);
		},
		addStep() {
			if (!this.addForm.description || this.addForm.description.trim().length === 0) {
				this.$message.warning({message: '请输入描述信息'});
				return;
			}
			this.addForm.key = this.widget.props.steps.length;
			this.widget.props.steps.push(this.addForm);
			this.widget.props.steps.forEach((step, index) => {
				step.key = index;
			})
			this.addForm.visible = false;
		}
	}
}
</script>
<script setup>
</script>
